<template>
  <div id="panel">
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="河流：" prop="riverid">
          <el-select
            clearable
            v-model="queryParams.riverid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in riverOptions"
              :key="item.id"
              :label="item.riveralias"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点名称：" prop="stationName">
          <el-input
            v-model="queryParams.stationName"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="时间范围：" prop="timeRange">
          <el-date-picker
            v-model="queryParams.timeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <div class="searchBtnBox">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            @click="handleExport"
            style="padding: 10px"
            >导出</el-button
          >
        </div>
      </el-form>
    </el-card>
    <el-card class="pageContent">
      <el-table id="selectTable" :data="tableData" stripe :height="tableHeight">
        <el-table-column prop="name" label="站点名称" />
        <el-table-column prop="rivername" label="河流名称" />
        <el-table-column prop="collecttime" label="采集时间">
          <template slot-scope="scope">
            {{ formatTime(scope.row.collecttime) }}
          </template>
        </el-table-column>
        <el-table-column prop="wateryield" label="水位 (m)" />
        <el-table-column prop="flow" label="瞬时流量 (m³/s)" />
        <el-table-column prop="presentwaterdeep" label="闸下水位 (m)" />
        <!-- <el-table-column prop="warningWaterLevel" label="警戒水位 (m)" />
        <el-table-column prop="guaranteeWaterLevel" label="保证水位 (m)" /> -->
      </el-table>
      <!-- <el-pagination
        class="pagination-self"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableList.total"
      >
      </el-pagination> -->
    </el-card>
  </div>
</template>
<script>
import dayjs from "dayjs";
import tableToExcel from "@/utils/tableToExcel";
import { getRiverList } from "@/api/dataResources/monitorData/river.js";
import { getSwDataList } from "@/api/dataResources/waterJcData/jcsection";
export default {
  name: "HydrologicStation",
  data() {
    return {
      tableHeight: window.innerHeight - 400,
      riverOptions: [],
      flowOptions: [
        { value: "是", label: "是" },
        { value: "否", label: "否" },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        riverid: "",
        stationName: "",
        timeRange: [],
      },
      tableData: [],
      tableList: {
        total: 0,
        rows: [],
      },
    };
  },
  created() {
    this.getRiverList();
  },
  mounted() {},
  methods: {
    formatTime(timeStr) {
      if (!timeStr) return "";
      // 格式化规则：
      // YYYY -> 四位年份
      // MM -> 两位月份（01-12）
      // DD -> 两位日期（01-31）
      // HH -> 24小时制小时（00-23）
      // mm -> 两位分钟（00-59）
      // ss -> 两位秒数（00-59）
      return dayjs(timeStr).format("YYYY-MM-DD HH-mm-ss");
    },
    // 获取河流数据
    async getRiverList() {
      let query = {
        pageNum: 1,
        pageSize: 1000,
      };
      const res = await getRiverList(query);
      if (res.code === 200) {
        this.riverOptions = res.rows;
        // this.queryParams.riverid = res.rows[0].id;
        this.getList();
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleExport() {
      // 导出逻辑
      tableToExcel.getExcel("#selectTable", "水文数据");
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    getList() {
      let query = {
        // pageNum: this.queryParams.pageNum,
        // pageSize: this.queryParams.pageSize,
        riverid: this.queryParams.riverid,
        stationName: this.queryParams.stationName,
        // timeRange: this.queryParams.timeRange,
        starttime:
          this.queryParams.timeRange.length > 0
            ? this.queryParams.timeRange[0]
            : "",
        endtime:
          this.queryParams.length > 0 ? this.queryParams.timeRange[1] : "",
      };
      getSwDataList(query).then((res) => {
        // this.tableList.total = res.total;
        // this.tableList.rows = res.data;
        this.tableData = res.data;
      });
      // 目前模拟无数据情况
      // this.tableData = [];
      // this.tableList.total = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 20px 0 20px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .el-form-item__content {
      min-width: 200px;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
